<template>
  <div class="box2">
    <div id="pieChart2"></div>
  </div>
</template>
 
<script>
export default {
  mounted() {
    this.chartFn();
  },
  methods: {
    chartFn() {
      // 基于准备好的dom，初始化echarts实例
      var pieChart2 = this.$echarts.init(document.getElementById("pieChart2"));
      pieChart2.setOption({
        title: {
          text: "评价占比",
          x: "center",
        },
        legend: {
          orient: "vertical",
          left: "left",
          data: ["好评 880 40%", "中评 300 30%", "差评 130 20%"],
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["30%", "45%"],
            center: ["50%", "60%"],
            data: [
              {
                value: 880,
                name: "好评 880 40%",
                itemStyle: { normal: { color: "#006effe5" } },
              },
              {
                value: 300,
                name: "中评 300 30%",
                itemStyle: { normal: { color: "#8FBC8F" } },
              },
              {
                value: 130,
                name: "差评 130 20%",
                itemStyle: { normal: { color: "#FFB6C1" } },
              },
            ],
          },
        ],
      });
    },
  },
};
</script>
 
<style scoped>
.box2 {
  margin-top: 50px;
}
#pieChart2 {
  width: 500px;
  height: 500px;
}
</style>